<template>
  <div class="index">
    <!-- 轮播图 -->
    <cube-slide ref="slide" :data="items" @change="changePage">
      <cube-slide-item v-for="(item, index) in items" :key="index" @click.native="clickHandler(item, index)">
        <a :href="item.url">
          <img :src="item.image">
        </a>
      </cube-slide-item>
    </cube-slide>

    <!-- 分类滚动-->
    <cube-slide ref="slide-category" :data="lists" :auto-play="false">
      <cube-slide-item v-for="(list, index) in lists" :key="index">
        <ul class="listul">
          <li class="listli" v-for="(item, indexOfCategory) in list" :key="indexOfCategory">
            <a :href="item.url">
              <img :src="item.image">
              <p>{{ item.label }}</p>
            </a>
          </li>
        </ul>
      </cube-slide-item>
    </cube-slide>

  </div>
</template>

<script>


export default {
  data() {
    return {
      items: [
        {
          url: 'http://www.didichuxing.com/',
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
        },
        {
          url: 'http://www.didichuxing.com/',
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
        },
        {
          url: 'http://www.didichuxing.com/',
          image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
        }
      ],
      lists: [
        [{
          label: '京东',
          url: 'http://www.didichuxing.com/',
          image: 'https://wqzisgod.oss-cn-shanghai.aliyuncs.com/image/jingdong.jpg'
        },
        {
          label: '京东',
          url: 'http://www.didichuxing.com/',
          image: 'https://wqzisgod.oss-cn-shanghai.aliyuncs.com/image/jingdong.jpg'
        },
        {
          label: '京东',
          url: 'http://www.didichuxing.com/',
          image: 'https://wqzisgod.oss-cn-shanghai.aliyuncs.com/image/jingdong.jpg'
        },
        {
          label: '京东',
          url: 'http://www.didichuxing.com/',
          image: 'https://wqzisgod.oss-cn-shanghai.aliyuncs.com/image/jingdong.jpg'
        },
        {
          label: '京东',
          url: 'http://www.didichuxing.com/',
          image: 'https://wqzisgod.oss-cn-shanghai.aliyuncs.com/image/jingdong.jpg'
        },
        {
          label: '京东',
          url: 'http://www.didichuxing.com/',
          image: 'https://wqzisgod.oss-cn-shanghai.aliyuncs.com/image/jingdong.jpg'
        }],
        [
          {
            label: '京东',
            url: 'http://www.didichuxing.com/',
            image: 'https://wqzisgod.oss-cn-shanghai.aliyuncs.com/image/jingdong.jpg'
          },
          {
            label: '京东',
            url: 'http://www.didichuxing.com/',
            image: 'https://wqzisgod.oss-cn-shanghai.aliyuncs.com/image/jingdong.jpg'
          },
          {
            label: '京东',
            url: 'http://www.didichuxing.com/',
            image: 'https://wqzisgod.oss-cn-shanghai.aliyuncs.com/image/jingdong.jpg'
          },
          {
            label: '京东',
            url: 'http://www.didichuxing.com/',
            image: 'https://wqzisgod.oss-cn-shanghai.aliyuncs.com/image/jingdong.jpg'
          },
          {
            label: '京东',
            url: 'http://www.didichuxing.com/',
            image: 'https://wqzisgod.oss-cn-shanghai.aliyuncs.com/image/jingdong.jpg'
          },
          {
            label: '京东',
            url: 'http://www.didichuxing.com/',
            image: 'https://wqzisgod.oss-cn-shanghai.aliyuncs.com/image/jingdong.jpg'
          }
        ]




      ]
    }
  },
  methods: {
    changePage(current) {
      console.log('当前轮播图序号为:' + current)
    },
    clickHandler(item, index) {
      console.log(item, index)
    }
  }
}
</script>

<style lang="stylus">
  .listul
    display flex
    flex-wrap: wrap
  .listli
    width 33.3%
    height 100px
    img
      width 60%
      height 60%
      padding: 10px 0
      border-radius: 50%
    p
      text-align center
      font-size 12px

</style>
